<template>
  <div class="main-tab-bar">
    <tab-bar class="tab-bar">
      <tab-bar-item
        class="tab-bar-item"
        v-for="(title, index) in titles"
        :key="index"
        :iconname="iconnames[index]"
        :title="titles[index]"
        :activeColor="activeColors[index]"
        :isAcctive="index == currentIndex"
        @click.native="itemClick(index)"
      >
      </tab-bar-item>
    </tab-bar>
  </div>
</template>

<script>
import TabBar from "components/common/tabbar/TabBar.vue";
import TabBarItem from "components/common/tabbar/TabBarItem.vue";

export default {
  name: "MainTabBar",
  data() {
    return {
      titles: ["首页", "查询", "订单", "我的"],
      iconnames: ["icon-home", "icon-sousuo", "icon-dingdan", "icon-wode"],
      activeColors: ["#FF8097", "#FF8097", "#FF8097", "#FF8097"],
      routeMap: ["/index", "/search", "/order", "/profile"],

    };
  },
  computed: {
    currentIndex() {
      return this.routeMap.findIndex(item => {
        return this.$route.path.includes(item)
      })
    }
  },
  components: {
    TabBar,
    TabBarItem,
  },
  methods: {
    itemClick(index) {
      // console.log(index);
      this.$router.replace(this.routeMap[index]).catch((err) => {});
    },
  },
};
</script>

<style lang="less" scoped>
.main-tab-bar {
  position: fixed;
  left: 0%;
  right: 0%;
  bottom: 2px;
  width: 100vw;
  height: 51px;
  border-top: 2px solid rgba(100, 100, 100, 0.1);
  background-color: #fff;
  .tab-bar {
    display: flex;
    width: 100%;
    height: 100%;
    .tab-bar-item {
      flex: 1;
    }
  }
}
</style>